<!--
  @author:  long
  @date:    2024/5/28
  @file:    xx
  @require:
-->
<template>
  <div class="projectDetailsManage">
    <div class="details-header">
      <div class="details-header-title">
        <el-tooltip effect="dark" :content="projectInfo.name" placement="top">
          <span>{{ projectInfo.name }}</span>
        </el-tooltip>
      </div>
      <div class="divider"></div>
      <div>
        <el-popover
          placement="bottom-start"
          trigger="hover"
          :width="200"
          popper-class="popoverClass"
        >
          <div class="popoverUl">
            <el-popover
              placement="right-start"
              :width="300"
              trigger="hover"
              :offset="22"
            >
              <pop-project-info :projectInfo="projectInfo"></pop-project-info>
              <template #reference>
                <div class="popoverLi cursor-pointer">
                  <div class="li-left">
                    <div class="li-icon">
                      <el-icon size="20" color="#aaa">
                        <Warning />
                      </el-icon>
                    </div>
                    <div class="li-content">项目信息</div>
                  </div>
                  <div class="li-right">
                    <el-icon size="15" color="#aaa">
                      <ArrowRight />
                    </el-icon>
                  </div>
                </div>
              </template>
            </el-popover>
            <el-divider></el-divider>
            <div
              class="popoverLi cursor-pointer"
              @click="handleEditProjectInfo"
            >
              <div class="li-left">
                <div class="li-icon">
                  <el-icon size="18" color="#aaa">
                    <Edit />
                  </el-icon>
                </div>
                <div class="li-content">编辑信息</div>
              </div>
              <div class="li-right"></div>
            </div>
            <el-divider></el-divider>
            <div class="popoverLi cursor-pointer" @click="handleSetting(row)">
              <div class="li-left">
                <div class="li-icon">
                  <el-icon size="18" color="#aaa">
                    <Setting />
                  </el-icon>
                </div>
                <div class="li-content">高级设置</div>
              </div>
              <div class="li-right"></div>
            </div>
          </div>

          <template #reference>
            <div class="table-icon">
              <el-tooltip placement="top" content="设置" @click="popoverShow">
                <el-icon color="#909399" size="20">
                  <Operation />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-popover>
      </div>
      <div class="divider"></div>

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="概览" name="overview"></el-tab-pane>
        <el-tab-pane label="规划" name="plan"></el-tab-pane>
        <el-tab-pane label="需求" name="backlog"></el-tab-pane>
        <el-tab-pane label="缺陷" name="defect"></el-tab-pane>
        <el-tab-pane label="更多" name="more"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="details-content">
      <!--     概览     -->

      <!--     规划     -->
      <!--     需求     -->
      <template v-if="activeName == 'backlog'">
        <backlog ref="backlogRef"></backlog>
      </template>
      <!--     缺陷     -->
      <!--    项目设置    -->
      <template v-if="activeName == 'settings'">
        <project-settings></project-settings>
      </template>
    </div>
  </div>
</template>

<script setup name="ProjectDetailsManage">
import Backlog from '@/views/researchManage/projectDetailsManage/backlog/index.vue'
import projectSettings from '@/views/researchManage/projectDetailsManage/projectSettings/index.vue'
import { getCurrentInstance } from 'vue'
import PopProjectInfo from '@/views/researchManage/projectManage/modal/PopProjectInfo.vue'
import router from '@/router'
import useResearchProjectStore from '@/store/modules/researchProject'

const { proxy } = getCurrentInstance()
const activeName = ref('')
const projectId = ref('')
const popoverVisible = ref(false)
const projectInfo = ref({})
const researchProjectStore = useResearchProjectStore()

onBeforeMount(() => {
  //获取router的modal参数
  activeName.value = proxy.$route.query.modal
  projectId.value = proxy.$route.query.projectId
  console.info('projectId.value', projectId.value)
  //   获取项目信息
  researchProjectStore.getProjectInfo(projectId.value).then(res => {
    projectInfo.value = res
  })
})

watch(
  () => researchProjectStore.projectInfo,
  (newVal, oldVal) => {
    projectInfo.value = newVal
  }
)

// 点击更多
const popoverShow = () => {
  popoverVisible.value = true
}
// 设置路由变量
const routerPush = (modal, handle) => {
  //确认
  router.push({
    query: {
      modal: modal,
      handle: handle,
      projectId: proxy.$route.query.projectId
    }
  })
}

// tab切换
const handleClick = (tab, event) => {
  switch (tab.props.name) {
    case 'overview':
      break
    case 'plan':
      break
    case 'backlog':
      //需求
      routerPush('backlog', '')

      break
    case 'defect':
      break
    case 'more':
      break
  }
  console.info('tab', tab.props.name)
}

//编辑项目信息
const handleEditProjectInfo = () => {
  activeName.value = 'settings'
  //设置-编辑信息
  routerPush('settings', 'infoEdit')
}

// 跳转高级设置
const handleSetting = row => {
  activeName.value = 'settings'
  //设置-高级设置
  routerPush('settings', 'advanced')
}
</script>

<style scoped lang="scss">
.details-header {
  border-bottom: 3px solid #eee;
  box-shadow: 0 4px 8px #00000008;
  position: relative;
  z-index: 2;
  height: 52px;
  line-height: 52px;
  display: flex;
  align-items: center;

  .details-header-title {
    max-width: 11em;
    font-size: 16px;
    color: #333;
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .divider {
    position: relative;
    display: inline-block;
    height: 2rem;
    margin: 0 16px;
    vertical-align: middle;
    border-top: 0;
    border-left: 1px solid #ddd;
  }

  :deep(.el-tabs__header) {
    margin-bottom: -2px;
  }

  .tableSvgIcon {
    width: 23px;
    height: 23px;
    margin-right: 10px;
  }

  .table-icon {
    @apply flex justify-center items-center w-8 h-8 rounded;
  }

  .table-icon i {
    font-size: 14px;
  }

  .table-icon:hover {
    cursor: pointer;
    background-color: #c6e2ff;
  }
}

:deep(.popoverLi) {
  @apply flex justify-between items-center;

  .li-left,
  .li-right {
    @apply flex items-center;
  }

  .li-icon {
    @apply flex items-center mr-2;
  }

  .li-content {
    @apply color-#333 text-lg;
  }
}

:deep(.el-divider--horizontal) {
  margin: 12px 0;
}
</style>
